---
import LayoutHtml from '@/layouts/LayoutHtml.astro';
import LayoutBody from '@/layouts/LayoutBody.astro';
import LayoutMain from '@/layouts/LayoutMain.astro';
import UserRecords from '@/components/user/UserRecords.vue';
---

<LayoutHtml>
<LayoutBody>
<LayoutMain>
  <!-- 个人中心容器 -->
  <div class="min-h-screen bg-gray-50 dark:bg-gray-900" th:with="user=${@userTag.getLoginUser()}">
    <!-- 顶部导航栏 -->
    <nav class="bg-white dark:bg-gray-800 shadow">
      <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
        <div class="flex justify-between h-16">
          <div class="flex">
            <div class="flex-shrink-0 flex items-center">
              <h1 class="text-xl font-bold text-gray-900 dark:text-white">个人中心</h1>
            </div>
          </div>
          <div class="flex items-center">
            <button class="text-gray-600 dark:text-gray-300 hover:text-gray-900 dark:hover:text-white px-3 py-2 rounded-md text-sm font-medium">
              退出登录
            </button>
          </div>
        </div>
      </div>
    </nav>

    <!-- 主要内容区域 -->
    <main class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-8">
      <div class="grid grid-cols-1 lg:grid-cols-12 gap-8">
        <!-- 左侧个人信息卡片 -->
        <div class="lg:col-span-3 space-y-6">
          <!-- 用户资料卡片 -->
          <div class="bg-white dark:bg-gray-800 shadow rounded-lg overflow-hidden">
            <div class="bg-gradient-to-r from-blue-500 to-indigo-600 h-24"></div>
            <div class="px-6 pt-6 pb-4">
              <div class="flex justify-center">
                <div class="h-24 w-24 rounded-full border-4 border-white dark:border-gray-800 overflow-hidden -mt-12">
                  <img 
                    th:src="${user.avatar}"
                    th:alt="${user.nickName}"
                    class="h-full w-full object-cover"
                  >
                </div>
              </div>
              <div class="text-center mt-4">
                <h3 class="text-lg font-medium text-gray-900 dark:text-white" th:text="${user.nickName}">用户名</h3>
                <p class="text-sm text-gray-500 dark:text-gray-400">普通用户</p>
              </div>
              <div class="mt-4 text-center">
                <button class="inline-flex items-center px-4 py-2 border border-transparent text-sm font-medium rounded-md shadow-sm text-white bg-blue-600 hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500">
                  编辑个人资料
                </button>
              </div>
            </div>
            <div class="border-t border-gray-200 dark:border-gray-700">
              <div class="grid grid-cols-3 divide-x divide-gray-200 dark:divide-gray-700">
                <div class="px-4 py-3 text-center">
                  <p class="text-sm font-medium text-gray-900 dark:text-white">28</p>
                  <p class="text-xs text-gray-500 dark:text-gray-400">发布文章</p>
                </div>
                <div class="px-4 py-3 text-center">
                  <p class="text-sm font-medium text-gray-900 dark:text-white">156</p>
                  <p class="text-xs text-gray-500 dark:text-gray-400">收到评论</p>
                </div>
                <div class="px-4 py-3 text-center">
                  <p class="text-sm font-medium text-gray-900 dark:text-white">42</p>
                  <p class="text-xs text-gray-500 dark:text-gray-400">收藏文章</p>
                </div>
              </div>
            </div>
          </div>

          <!-- 快捷导航 - 支持二级菜单 -->
          <div class="bg-white dark:bg-gray-800 shadow rounded-lg overflow-hidden">
            <div class="px-4 py-3">
              <h3 class="text-sm font-medium text-gray-700 dark:text-gray-300">快捷导航</h3>
            </div>
            <nav class="px-2 py-1">
              <a href="#" class="group flex items-center px-2 py-2 text-base font-medium rounded-md text-gray-700 dark:text-gray-300 hover:bg-gray-50 dark:hover:bg-gray-700">
                <svg class="mr-3 h-6 w-6 text-gray-400 group-hover:text-gray-500 dark:text-gray-500 dark:group-hover:text-gray-300" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                  <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M16 7a4 4 0 11-8 0 4 4 0 018 0zM12 14a7 7 0 00-7 7h14a7 7 0 00-7-7z" />
                </svg>
                个人资料
              </a>
              
              <!-- 带二级菜单的导航项 -->
              <div class="space-y-1">
                <button 
                  class="group w-full flex items-center justify-between px-2 py-2 text-base font-medium rounded-md bg-blue-50 text-blue-700 dark:bg-blue-900/20 dark:text-blue-400"
                  id="contentMenuBtn"
                  onclick="toggleSubMenu('contentSubMenu', this)"
                >
                  <div class="flex items-center">
                    <svg class="mr-3 h-6 w-6 text-blue-400" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                      <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m5.618-4.016A11.955 11.955 0 0112 2.944a11.955 11.955 0 01-8.618 3.04A12.02 12.02 0 003 9c0 5.591 3.824 10.29 9 11.622 5.176-1.332 9-6.03 9-11.622 0-1.042-.133-2.052-.382-3.016z" />
                    </svg>
                    内容管理
                  </div>
                  <svg class="h-5 w-5 transform transition-transform duration-200" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7" />
                  </svg>
                </button>
                
                <!-- 二级菜单 -->
                <div id="contentSubMenu" class="pl-10 hidden space-y-1">
                  <a href="#" class="block px-2 py-2 text-sm font-medium rounded-md text-gray-700 dark:text-gray-300 hover:bg-gray-50 dark:hover:bg-gray-700">
                    仪表盘
                  </a>
                  <a href="#" class="block px-2 py-2 text-sm font-medium rounded-md text-gray-700 dark:text-gray-300 hover:bg-gray-50 dark:hover:bg-gray-700">
                    我的文章
                  </a>
                  <a href="#" class="block px-2 py-2 text-sm font-medium rounded-md text-gray-700 dark:text-gray-300 hover:bg-gray-50 dark:hover:bg-gray-700">
                    草稿箱
                  </a>
                  <a href="#" class="block px-2 py-2 text-sm font-medium rounded-md text-gray-700 dark:text-gray-300 hover:bg-gray-50 dark:hover:bg-gray-700">
                    已发布
                  </a>
                </div>
              </div>
              
              <div class="space-y-1">
                <button 
                  class="group w-full flex items-center justify-between px-2 py-2 text-base font-medium rounded-md text-gray-700 dark:text-gray-300 hover:bg-gray-50 dark:hover:bg-gray-700"
                  id="interactionMenuBtn"
                  onclick="toggleSubMenu('interactionSubMenu', this)"
                >
                  <div class="flex items-center">
                    <svg class="mr-3 h-6 w-6 text-gray-400 group-hover:text-gray-500 dark:text-gray-500 dark:group-hover:text-gray-300" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                      <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 16l4.586-4.586a2 2 0 012.828 0L16 16m-2-2l1.586-1.586a2 2 0 012.828 0L20 14m-6-6h.01M6 20h12a2 2 0 002-2V6a2 2 0 00-2-2H6a2 2 0 00-2 2v12a2 2 0 002 2z" />
                    </svg>
                    互动管理
                  </div>
                  <svg class="h-5 w-5 transform transition-transform duration-200" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7" />
                  </svg>
                </button>
                
                <!-- 二级菜单 -->
                <div id="interactionSubMenu" class="pl-10 hidden space-y-1">
                  <a href="#" class="block px-2 py-2 text-sm font-medium rounded-md text-gray-700 dark:text-gray-300 hover:bg-gray-50 dark:hover:bg-gray-700">
                    我的收藏
                  </a>
                  <a href="#" class="block px-2 py-2 text-sm font-medium rounded-md text-gray-700 dark:text-gray-300 hover:bg-gray-50 dark:hover:bg-gray-700">
                    我的评论
                  </a>
                  <a href="#" class="block px-2 py-2 text-sm font-medium rounded-md text-gray-700 dark:text-gray-300 hover:bg-gray-50 dark:hover:bg-gray-700">
                    收到的点赞
                  </a>
                </div>
              </div>
              
              <div class="space-y-1">
                <button 
                  class="group w-full flex items-center justify-between px-2 py-2 text-base font-medium rounded-md text-gray-700 dark:text-gray-300 hover:bg-gray-50 dark:hover:bg-gray-700"
                  id="settingsMenuBtn"
                  onclick="toggleSubMenu('settingsSubMenu', this)"
                >
                  <div class="flex items-center">
                    <svg class="mr-3 h-6 w-6 text-gray-400 group-hover:text-gray-500 dark:text-gray-500 dark:group-hover:text-gray-300" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                      <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 15v2m-6 4h12a2 2 0 002-2v-6a2 2 0 00-2-2H6a2 2 0 00-2 2v6a2 2 0 002 2zm10-10V7a4 4 0 00-8 0v4h8z" />
                    </svg>
                    账户设置
                  </div>
                  <svg class="h-5 w-5 transform transition-transform duration-200" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7" />
                  </svg>
                </button>
                
                <!-- 二级菜单 -->
                <div id="settingsSubMenu" class="pl-10 hidden space-y-1">
                  <a href="#" class="block px-2 py-2 text-sm font-medium rounded-md text-gray-700 dark:text-gray-300 hover:bg-gray-50 dark:hover:bg-gray-700">
                    个人信息
                  </a>
                  <a href="#" class="block px-2 py-2 text-sm font-medium rounded-md text-gray-700 dark:text-gray-300 hover:bg-gray-50 dark:hover:bg-gray-700">
                    安全设置
                  </a>
                  <a href="#" class="block px-2 py-2 text-sm font-medium rounded-md text-gray-700 dark:text-gray-300 hover:bg-gray-50 dark:hover:bg-gray-700">
                    通知偏好
                  </a>
                  <a href="#" class="block px-2 py-2 text-sm font-medium rounded-md text-gray-700 dark:text-gray-300 hover:bg-gray-50 dark:hover:bg-gray-700">
                    隐私设置
                  </a>
                </div>
              </div>
            </nav>
          </div>
        </div>

        <!-- 右侧主要内容区域 -->
        <div class="lg:col-span-9 space-y-6">
          <!-- 欢迎卡片 -->
          <div class="bg-gradient-to-r from-blue-600 to-indigo-700 rounded-lg shadow-lg overflow-hidden">
            <div class="px-6 py-8 text-white">
              <h2 class="text-2xl font-bold">欢迎回来，<span th:text="${user.nickName}">用户名</span>！</h2>
              <p class="mt-2 opacity-90">继续探索和分享精彩内容</p>
              <div class="mt-6 flex space-x-4">
                <button class="inline-flex items-center px-4 py-2 border border-transparent text-sm font-medium rounded-md shadow-sm text-blue-700 bg-white hover:bg-gray-100 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500">
                  发布新文章
                </button>
                <button class="inline-flex items-center px-4 py-2 border border-transparent text-sm font-medium rounded-md text-blue-700 bg-white hover:bg-gray-100 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500">
                  查看通知
                </button>
              </div>
            </div>
          </div>

          <!-- 统计数据卡片 -->
          <div class="grid grid-cols-1 md:grid-cols-3 gap-6">
            <div class="bg-white dark:bg-gray-800 shadow rounded-lg p-6">
              <div class="flex items-center">
                <div class="flex-shrink-0 bg-green-500/10 rounded-md p-3">
                  <svg class="h-6 w-6 text-green-500" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 19v-6a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2a2 2 0 002-2zm0 0V9a2 2 0 012-2h2a2 2 0 012 2v10m-6 0a2 2 0 002 2h2a2 2 0 002-2m0 0V5a2 2 0 012-2h2a2 2 0 012 2v14a2 2 0 01-2 2h-2a2 2 0 01-2-2z" />
                  </svg>
                </div>
                <div class="ml-4">
                  <h3 class="text-sm font-medium text-gray-500 dark:text-gray-400">总浏览量</h3>
                  <div class="mt-1 text-2xl font-semibold text-gray-900 dark:text-white">12,453</div>
                  <div class="mt-1 text-sm font-medium text-green-500">
                    <span class="flex items-center">
                      <svg class="h-4 w-4 mr-1" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 15l7-7 7 7" />
                      </svg>
                      12.5%
                    </span>
                  </div>
                </div>
              </div>
            </div>

            <div class="bg-white dark:bg-gray-800 shadow rounded-lg p-6">
              <div class="flex items-center">
                <div class="flex-shrink-0 bg-blue-500/10 rounded-md p-3">
                  <svg class="h-6 w-6 text-blue-500" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 12h.01M12 12h.01M16 12h.01M21 12c0 4.418-4.03 8-9 8a9.863 9.863 0 01-4.255-.949L3 20l1.395-3.72C3.512 15.042 3 13.574 3 12c0-4.418 4.03-8 9-8s9 3.582 9 8z" />
                  </svg>
                </div>
                <div class="ml-4">
                  <h3 class="text-sm font-medium text-gray-500 dark:text-gray-400">收到点赞</h3>
                  <div class="mt-1 text-2xl font-semibold text-gray-900 dark:text-white">324</div>
                  <div class="mt-1 text-sm font-medium text-green-500">
                    <span class="flex items-center">
                      <svg class="h-4 w-4 mr-1" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 15l7-7 7 7" />
                      </svg>
                      8.2%
                    </span>
                  </div>
                </div>
              </div>
            </div>

            <div class="bg-white dark:bg-gray-800 shadow rounded-lg p-6">
              <div class="flex items-center">
                <div class="flex-shrink-0 bg-purple-500/10 rounded-md p-3">
                  <svg class="h-6 w-6 text-purple-500" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 10h.01M12 10h.01M16 10h.01M9 16H5a2 2 0 01-2-2V6a2 2 0 012-2h14a2 2 0 012 2v8a2 2 0 01-2 2h-5l-5 5v-5z" />
                  </svg>
                </div>
                <div class="ml-4">
                  <h3 class="text-sm font-medium text-gray-500 dark:text-gray-400">评论数</h3>
                  <div class="mt-1 text-2xl font-semibold text-gray-900 dark:text-white">156</div>
                  <div class="mt-1 text-sm font-medium text-green-500">
                    <span class="flex items-center">
                      <svg class="h-4 w-4 mr-1" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 15l7-7 7 7" />
                      </svg>
                      5.3%
                    </span>
                  </div>
                </div>
              </div>
            </div>
          </div>

          <!-- 用户记录组件 -->
          <div>
            <h3 class="text-lg font-medium text-gray-900 dark:text-white mb-4">我的记录</h3>
            <UserRecords themeName="nice" client:idle />
          </div>
        </div>
      </div>
    </main>

    <!-- 页脚 -->
    <footer class="bg-white dark:bg-gray-800 border-t border-gray-200 dark:border-gray-700 py-8">
      <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
        <div class="text-center text-sm text-gray-500 dark:text-gray-400">
          <p>&copy; 2023 网站名称. 保留所有权利.</p>
        </div>
      </div>
    </footer>
  </div>
</LayoutMain>
</LayoutBody>
</LayoutHtml>

<!-- 二级菜单切换脚本 -->
<script>

document.addEventListener('DOMContentLoaded', function() {
function toggleSubMenu(subMenuId, button) {
  const subMenu = document.getElementById(subMenuId);
  const icon = button.querySelector('svg:last-child');
  
  // 切换二级菜单显示状态
  if (subMenu.classList.contains('hidden')) {
    subMenu.classList.remove('hidden');
    // 旋转箭头图标
    icon.classList.add('rotate-180');
  } else {
    subMenu.classList.add('hidden');
    // 恢复箭头图标
    icon.classList.remove('rotate-180');
  }
}
});


</script>

